<div id="loginContainer">
    <div class="welcomeMessage">
        <h2>Chat Demo</h2>
        <p>Welcome! You can log in with any username / password</p>
    </div>
    <div id="loginForm">
        <div class="line">
            <label for="txtUserName">Username</label>
            <input class="lineInput" type="text" id="txtUserName" tabindex="1"
                   onKeyDown="passwordFocus(event);"/>
        </div>
        <div class="line">
            <label for="txtPassword">Password</label>
            <input class="lineInput" type="password" id="txtPassword" value="" tabindex="2"
                   onKeyDown="loginOnEnterPressed(chatView, event);" onblur="focusId('txtUserName');"/>
        </div>
        <div class="line">
            <div class="loginButtonWrapper">
                <a class="button" href="#" onclick="chatView.login();">
                    <span>Login</span>
                </a>
            </div>
        </div>
    </div>
    <div id="errorView"> </div>
    <script type="text/javascript">
        $('txtUserName').focus();
    </script>
</div>

<div id="connectingContainer">
    <div id="connecting">Connecting</div>
</div>

<!-- conversationView BEGIN-->
<div id="conversationView">
    <ul id="userList"><li>Users</li></ul>
    <div id="messageView"></div>
    <div id="messageViewSeparator"></div>
    <textarea id="txtMessage"
              name="txtMessage"
              onkeydown="chatView.processInputEvent(event)"
              onkeyup="chatView.clearInputEvent(event)"
              rows="3" cols="20"
              tabindex="1" onblur="focusId('txtMessage');"></textarea>
</div>
<!-- conversationView END-->
